<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16" type="flex" justify="center">
      <a-col :order="1" :md="24" :lg="16">
        <a-form :form="form" layout="vertical" @submit.prevent="handleSubmit">
          <a-form-item
            label="邮箱"
          >
            <a-input
              placeholder="邮箱"
              v-decorator.trim="[
                'email',
                {
                  initialValue: currentUser.email,
                  rules: [
                    formRules.required('必填'),
                    formRules.email('格式错误')
                  ],
                  validateFirst: true,
                  validateTrigger: 'change'
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="联系电话"
          >
            <a-input
              placeholder="联系电话"
              v-decorator.trim="[
                'mobile',
                {
                  initialValue: currentUser.mobile,
                  rules: [
                    formRules.required('必填'),
                    formRules.mobile('格式错误'),
                  ],
                  validateFirst: true,
                  validateTrigger: 'change'
                }
              ]"
            />
          </a-form-item>

          <a-form-item>
            <a-button type="primary" :loading="state.loading" @click.prevent="handleSubmit">修改</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :order="1" :md="24" :lg="8" />
    </a-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import formRules from '@/utils/form/rules'
import { modifyCurrentUser } from '@/api/flow/user'

export default {
  computed: {
    ...mapGetters(['currentUser']),
  },

  data () {
    return {
      formRules,
      form: this.$form.createForm(this),

      // state
      state: {
        loading: false,
      },
    }
  },

  methods: {
    handleSubmit () {
      const { state } = this

      state.loading = true

      return new Promise((resolve, reject) => {
        this.validateFieldsForm()
          .then(() => {
            this.submitForm()
              .then(async (data) => {
                try {
                  await this.$store.dispatch('GetInfo')
                  state.loading = false
                  this.$notification.success({
                    message: '修改成功!',
                    duration: 1,
                  })
                  resolve(data)
                } catch (error) {
                  state.loading = false
                  reject(error)
                }
              })
              .catch((error) => {
                reject(error)
              })
              .finally(() => {
                state.loading = false
              })
          })
          .catch((error) => {
            reject(error)
            state.loading = false
          })
      })
    },

    // form validateFields
    validateFieldsForm () {
      return new Promise((resolve, reject) => {
        const {
          form: { validateFields },
        } = this

        const validateFieldsKey = ['email', 'mobile']

        validateFields(validateFieldsKey, { force: true, first: true }, (err, values) => {
          if (!err) {
            resolve()
            return false
          }
          reject(false)
        })
      })
    },

    submitForm () {
      const validateFieldsKey = ['email', 'mobile']

      return new Promise((resolve, reject) => {
        const fields = this.form.getFieldsValue(validateFieldsKey)

        modifyCurrentUser(fields)
          .then((data) => {
            resolve(data)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
  },
}
</script>

<style lang="less" scoped>

</style>
